<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube频道数据追踪工具</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- 自定义样式 -->
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-youtube"></i>
                YouTube数据追踪
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="true">
                            <i class="bi bi-speedometer2"></i> 仪表板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="rankings-tab" data-bs-toggle="tab" data-bs-target="#rankings" type="button" role="tab" aria-controls="rankings" aria-selected="false">
                            <i class="bi bi-trophy"></i> 排行榜
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="channels-tab" data-bs-toggle="tab" data-bs-target="#channels" type="button" role="tab" aria-controls="channels" aria-selected="false">
                            <i class="bi bi-collection"></i> 频道管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="data-table-tab" data-bs-toggle="tab" data-bs-target="#data-table" type="button" role="tab" aria-controls="data-table" aria-selected="false">
                            <i class="bi bi-table"></i> 数据表格
                        </a>
                    </li>
                </ul>
                
                <div class="navbar-nav">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-gear"></i> 设置
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="openAddChannelModal()">
                                <i class="bi bi-plus-circle"></i> 添加频道
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="syncAllChannels()">
                                <i class="bi bi-arrow-clockwise"></i> 同步数据
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" onclick="exportData()">
                                <i class="bi bi-download"></i> 导出数据
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container-fluid mt-3">
        <!-- 状态栏 -->
        <div id="status-bar" class="alert alert-info d-none" role="alert">
            <div class="d-flex align-items-center">
                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                <span id="status-text">正在加载...</span>
            </div>
        </div>

        <!-- 选项卡内容 -->
        <div class="tab-content" id="nav-tabContent">
            <!-- 仪表板 -->
            <div class="tab-pane fade show active" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab" tabindex="0">
                <div class="row">
                    <!-- 统计卡片 -->
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            活跃频道
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="active-channels-count">
                                            -
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-collection fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-success shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                            今日收入
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="today-revenue">
                                            $-
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-currency-dollar fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-info shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                            今日新增订阅
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="today-subscribers">
                                            -
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-people fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="card border-left-warning shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                            数据记录
                                        </div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="total-records">
                                            -
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="bi bi-database fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 排行榜概览 -->
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">
                                    <i class="bi bi-trophy"></i> 收入排行榜
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>日收入排行</h6>
                                        <div id="daily-revenue-ranking"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>月收入排行</h6>
                                        <div id="monthly-revenue-ranking"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 mb-4">
                        <div class="card shadow">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">
                                    <i class="bi bi-people"></i> 订阅增长排行榜
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>日新增订阅</h6>
                                        <div id="daily-subscriber-ranking"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>月新增订阅</h6>
                                        <div id="monthly-subscriber-ranking"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 趋势图表 -->
                <div class="row">
                    <div class="col-lg-12 mb-4">
                        <div class="card shadow">
                            <div class="card-header py-3 d-flex justify-content-between">
                                <h6 class="m-0 font-weight-bold text-primary">
                                    <i class="bi bi-graph-up"></i> 趋势图表
                                </h6>
                                <div>
                                    <select id="chart-type" class="form-select form-select-sm">
                                        <option value="revenue">收入趋势</option>
                                        <option value="subscribers">订阅者趋势</option>
                                        <option value="views">观看量趋势</option>
                                    </select>
                                </div>
                            </div>
                            <div class="card-body">
                                <canvas id="trend-chart" width="400" height="100"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 排行榜页面 -->
            <div class="tab-pane fade" id="rankings" role="tabpanel" aria-labelledby="rankings-tab" tabindex="0">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="bi bi-trophy"></i> 排行榜</h2>
                    <button class="btn btn-outline-primary" onclick="refreshRankings()">
                        <i class="bi bi-arrow-clockwise"></i> 刷新
                    </button>
                </div>

                <div class="row">
                    <!-- 日收入排行榜 -->
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0"><i class="bi bi-currency-dollar"></i> 日收入排行榜</h5>
                            </div>
                            <div class="card-body">
                                <div id="daily-revenue-full-ranking"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 月收入排行榜 -->
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0"><i class="bi bi-calendar-month"></i> 月收入排行榜</h5>
                            </div>
                            <div class="card-body">
                                <div id="monthly-revenue-full-ranking"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 日订阅增长排行榜 -->
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0"><i class="bi bi-people-fill"></i> 日订阅增长排行榜</h5>
                            </div>
                            <div class="card-body">
                                <div id="daily-subscriber-full-ranking"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 月订阅增长排行榜 -->
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow">
                            <div class="card-header bg-warning text-white">
                                <h5 class="mb-0"><i class="bi bi-graph-up"></i> 月订阅增长排行榜</h5>
                            </div>
                            <div class="card-body">
                                <div id="monthly-subscriber-full-ranking"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 频道管理页面 -->
            <div class="tab-pane fade" id="channels" role="tabpanel" aria-labelledby="channels-tab" tabindex="0">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="bi bi-collection"></i> 频道管理</h2>
                    <div>
                        <button class="btn btn-success" onclick="openAddChannelModal()">
                            <i class="bi bi-plus-circle"></i> 添加频道
                        </button>
                        <button class="btn btn-outline-primary" onclick="loadChannels()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                </div>

                <!-- 搜索和筛选 -->
                <div class="row mb-3">
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="channel-search" placeholder="搜索频道...">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="category-filter">
                            <option value="">所有分类</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary" onclick="searchChannels()">
                            <i class="bi bi-search"></i> 搜索
                        </button>
                    </div>
                </div>

                <!-- 频道列表 -->
                <div class="card shadow">
                    <div class="card-body">
                        <div id="channels-list"></div>
                        
                        <!-- 分页 -->
                        <nav id="channels-pagination" class="mt-3">
                            <ul class="pagination justify-content-center"></ul>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- 数据表格页面 -->
            <div class="tab-pane fade" id="data-table" role="tabpanel" aria-labelledby="data-table-tab" tabindex="0">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="bi bi-table"></i> 数据表格</h2>
                    <div>
                        <button class="btn btn-success" onclick="exportTableData()">
                            <i class="bi bi-download"></i> 导出CSV
                        </button>
                        <button class="btn btn-outline-primary" onclick="loadTableData()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                </div>

                <!-- 日期筛选 -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label">开始日期</label>
                        <input type="date" class="form-control" id="start-date">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">结束日期</label>
                        <input type="date" class="form-control" id="end-date">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <button class="btn btn-primary d-block" onclick="filterTableData()">
                            <i class="bi bi-funnel"></i> 筛选
                        </button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="card shadow">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="data-table-content">
                                <thead class="table-dark sticky-top">
                                    <tr>
                                        <th>日期</th>
                                        <!-- 动态生成频道列 -->
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 动态生成数据行 -->
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页 -->
                        <nav id="table-pagination" class="mt-3">
                            <ul class="pagination justify-content-center"></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加频道模态框 -->
    <div class="modal fade" id="addChannelModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加频道</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addChannelForm">
                        <div class="mb-3">
                            <label class="form-label">YouTube频道URL <span class="text-danger">*</span></label>
                            <input type="url" class="form-control" id="channel-url" required 
                                   placeholder="https://www.youtube.com/channel/...">
                            <div class="form-text">支持频道URL、用户名URL、@句柄等格式</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">频道名称</label>
                            <input type="text" class="form-control" id="channel-name" 
                                   placeholder="留空将自动从YouTube获取">
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">CPM值</label>
                                <input type="number" class="form-control" id="channel-cpm" 
                                       value="1.00" step="0.01" min="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">分类</label>
                                <input type="text" class="form-control" id="channel-category" 
                                       placeholder="如：科技、生活、娱乐">
                            </div>
                        </div>
                        
                        <div id="channel-preview" class="mt-3 d-none">
                            <div class="alert alert-info">
                                <h6>频道预览：</h6>
                                <div id="preview-content"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info" onclick="previewChannel()">预览</button>
                    <button type="button" class="btn btn-primary" onclick="addChannel()">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑频道模态框 -->
    <div class="modal fade" id="editChannelModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑频道</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editChannelForm">
                        <input type="hidden" id="edit-channel-id">
                        
                        <div class="mb-3">
                            <label class="form-label">频道名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit-channel-name" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">频道ID</label>
                            <input type="text" class="form-control" id="edit-channel-channel-id" readonly>
                            <div class="form-text">频道ID不可修改</div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">CPM值</label>
                                <input type="number" class="form-control" id="edit-channel-cpm" 
                                       step="0.01" min="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">分类</label>
                                <input type="text" class="form-control" id="edit-channel-category">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">描述</label>
                            <textarea class="form-control" id="edit-channel-description" rows="3"></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="edit-channel-active">
                                <label class="form-check-label" for="edit-channel-active">
                                    启用数据抓取
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateChannel()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JavaScript -->        <script src="js/config.js"></script>
    <script src="js/api.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/shared-navigation.js"></script>
    <script src="js/dashboard.js"></script>
    <script src="js/rankings.js"></script>
    <script src="js/channels.js"></script>
    <script src="js/data-table.js"></script>
    <script src="js/main.js"></script>
</body>
</html>